<template>
  <div class="app-container">
    <div id="app" style="width: 100%;display:inline-block">
      <el-form ref="searchForm" :model="searchForm" label-width="100px">
        <el-col :span="3">
          <el-form-item label="项目名称" label-width="70px">
            <el-input v-model="searchForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="客户名称" prop="customer_id" label-width="70px">
            <!--<el-input v-model="ruleForm.customer_id"></el-input>-->
            <el-select
              v-model="searchForm.customer_id"
              filterable
              remote
              reserve-keyword
              placeholder="关键词搜索，空格表示全部"
              :remote-method="remoteMethod"
              :loading="loading.customers">
              <el-option
                v-for="item in customers"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="合同类型" prop="origin_type" label-width="70px">
            <el-select v-model="searchForm.origin_type" placeholder="合同类型">
              <el-option v-for="(val, key) in contract" :key="key" :label="val.origin_type" :value="val.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="承建公司" prop="branch_id" label-width="70px">
            <el-select v-model="searchForm.branch_id" placeholder="合同类型">
              <el-option v-for="(val, key) in branch" :key="key" :label="val.name" :value="val.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="选择时间" prop="flow_status" label-width="70px">
            <el-date-picker
              v-model="searchForm.time"
              type="daterange"
              value-format = "timestamp"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <!--<el-form-item label="搜索" label-width="40px">-->
          <el-button @click="onSubmitSearchForm()" icon="el-icon-search" circle style="float: right;margin-right: 50%"></el-button>
          <!--</el-form-item>-->
        </el-col>
      </el-form>
    </div>
    <div style="padding:0 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="searchForm.currentPage"
        :page-sizes="[10,30,50,100]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchForm.totalCount">
      </el-pagination>
    </div>
    <table class="_table" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
      <thead>
      <tr>
        <th>id</th>
        <th width="200px">项目名称</th>
        <th>项目来源</th>
        <th>承建分公司</th>
        <th>生产负责人</th>
        <th>项目类型</th>
        <th width="100px">客户名称</th>
        <th>合同类型</th>
        <th>合同金额</th>
        <th>操作</th>
      </tr>
      </thead>
      <tr v-for="(item, key) in list" :key="key">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.origin_type | parseOriginType}}</td>
        <td>{{item.branch_id | parseBranch}}</td>
        <td>{{item.leading_user_name}}</td>
        <td>{{item.project_type_id | parseProjectType}}</td>
        <td>{{item.customer_name}}</td>
        <td>{{item.contract_type | parseContractType}}</td>
        <td>{{item.money_total}}</td>
        <td><el-button @click="onClickDeleteBtn(item.id)">启用</el-button></td>
      </tr>
    </table>
  </div>
</template>

<script>
  import { parseContractType, parseOriginType, updateProject, getProjectsRecover } from '../../api/project'
  import { parseTime } from '../../utils'
  import Store from '../../store'
  import { getCustomers } from '../../api/customer'
  import { getBranches } from '../../api/branch'

  export default {
    name: 'projectRecover',
    data() {
      return {
        /**
         * 项目列表相关变量
         */
        searchForm: {
          name: null,
          start_at: null,
          end_at: null,
          origin_type: null, // 合同类型
          branch_id: null,
          page: 1,
          pageSize: 10,
          totalCount: 0,
          time: []
        },
        contract: [
          { origin_type: '全部', id: null },
          { origin_type: '合同签订', id: 1 },
          { origin_type: '委托书', id: 2 },
          { origin_type: '中标通知书', id: 3 },
          { origin_type: '口头订单', id: 4 }
        ],
        branch: [
          { id: null, name: '全部' }
        ], // 承建单位
        delForm: {
          id: null,
          valid: 1
        },
        loading: {
          customers: false,
          users: false
        },
        customers: [],
        list: {},
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    filters: {
      parseTime: function(value) {
        if (!value) return ''
        value = value.toString()
        return parseTime(value, '{y}年{m}月{d}日')
      },
      parseContractType,
      parseOriginType,
      parseBranch: function(value) {
        const list = Store.state.user.branches
        for (const index in list) {
          if (parseInt(list[index].id) === value) {
            return list[index].name
          }
        }
        return value
      },
      parseProjectType: function(value) {
        if (value === 1) {
          return '配电'
        }
        if (value === 2) {
          return '迁改'
        }
        if (value === 3) {
          return '配网'
        }
        if (value === 4) {
          return '用电安全'
        }
        return value
      }
    },
    mounted() {
      this.fetchProjectsRecover()
      this.fetchBranches()
    },
    methods: {
      fetchProjectsRecover() {
        getProjectsRecover(this.searchForm).then(res => {
          this.list = res.data._items
          this.searchForm.totalCount = res.data._meta.totalCount
        })
      },
      // 获取承建公司列表
      fetchBranches() {
        getBranches().then(res => {
          for (const x in res.data) {
            this.branch.push(res.data[x])
          }
        })
      },
      // 一页多少行
      handleSizeChange(pageSize) {
        this.searchForm.pageSize = pageSize
        this.fetchProjectsRecover()
      },
      // 翻页
      handlePageChange(currentPage) {
        this.searchForm.page = currentPage
        this.fetchProjectsRecover()
      },
      // 警用功能
      onClickDeleteBtn(id) {
        this.delForm.id = id
        // 调用更新接口并响应
        updateProject(this.delForm).then(res => {
          this.fetchProjectsRecover()
          if (res.data.bCode === 101) {
            this.$message({
              message: '恭喜你修改成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '很抱歉修改,修改失败',
              type: 'warning'
            })
          }
        })
      },
      onSubmitSearchForm() {
        if (this.searchForm.time !== null && this.searchForm.time.length > 0) {
          this.searchForm.start_at = this.searchForm.time[0]
          this.searchForm.end_at = this.searchForm.time[1]
        } else {
          this.searchForm.start_at = null
          this.searchForm.end_at = null
        }
        this.fetchProjectsRecover()
      },
      /** 远程搜索客户列表方法 */
      remoteMethod(query) {
        this.loading.customers = true
        let params = {}
        if (query.trim() !== '') {
          params = { name: query.trim() }
        }
        getCustomers(params).then(res => {
          this.customers = res.data._items
          this.loading.customers = false
        })
      }
    }
  }
</script>
